<template>
	<view class="ss-flex list ss-row-left ss-col-center"
		@click="sheep.$router.go('/pages/pet/activityDetails', { id: data.id })">
		<image class='img'   :src="sheep.$url.cdn(data.image || data.images[0])" mode="aspectFill"></image>
		<view class="cont ss-flex-col">
			<text class="title overflow-ellipsis">{{ data.title }}</text>
			<view class="hot ss-flex ss-row-left " v-if="data.hot>100">
				<image class="hot_img" :src="sheep.$url.cdn('/storage/default/202401301552028386.png')" mode="aspectFill"></image>
				<text class="hot_num">{{ data.hot }}</text>
			</view>
			<view class="labels ss-flex ss-row-left ss-col-center">
				<view class="item" v-for="(i,index) in data.labels.slice(0,2)" :key="index">{{i}}</view>
			</view>
			<view class="bottoms ss-flex ss-row-between">
				<view class="postion_time flex-sub">
					<view class="position overflow-ellipsis">{{data.city}}·{{data.location}}</view>
					<view class="time ss-line-1">{{time}}</view>
				</view>
				<view class="amount_num">
					<view class="amount ss-flex ss-row-right">
						<template v-if="price_show(data)">
							<text class="money">￥</text><text class="amount_text">{{calcPrice(data.price)}}</text><text
								class="unit">/{{data.unit}}</text>
						</template>
						<template v-else>
							<text class="free">免费</text>
						</template>
					</view>
					<view class="num ss-flex ss-row-center" :style="{background:bgColor}">
						<text class="num_text"
							:style="textColor">{{limit}}</text></view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		computed,
		reactive,
		ref,
		onMounted
	} from 'vue';
	import sheep from '@/sheep';
	import _ from "lodash";

	const props = defineProps({
		data: {
			type: Object,
			default: {},
		}
	})

	const limit = computed(()=>{
		let time = new Date().getTime()
		let end_time = new Date(props.data.stop_time.replace(/-/g, '/')).getTime()
		if (props.data.num === 0 || time >= end_time) {
			return '报名已结束'
		}
		return `剩余名额${props.data.num}`
	})

	const price_show = (item) => {
		return item.price == null || item.price == 0 ? false : true;
	}
	
	const calcPrice = (price)=>{
		
		var price = String(price)
		
		if(price.length>0){
			
			var p_arr = [];
			
			if(_.includes(price,".")){
				
				p_arr = _.split(price,".")
				
				if(_.startsWith(p_arr[1],"0")){
					return p_arr[0]
				}else{
					return price
				}
			}else{
				return price
			}
		}else{
			return "-"
		}
	}

	const time = computed(() => {
		let begin_time = new Date(props.data.begin_time.replace(/-/g, '/'))
		let end_time = new Date(props.data.end_time.replace(/-/g, '/'))
		return `${begin_time.getFullYear()}.${begin_time.getMonth() + 1 < 10 ? `0${begin_time.getMonth() + 1}` : begin_time.getMonth() + 1}.${begin_time.getDate() < 10 ? `0${begin_time.getDate()}` : begin_time.getDate()}-${end_time.getMonth() + 1 < 10 ? `0${end_time.getMonth() + 1}` : end_time.getMonth() + 1}.${end_time.getDate() < 10 ? `0${end_time.getDate()}` : end_time.getDate()}`
	})

	const textColor = computed(() => {
		let time = new Date().getTime()
		let end_time = new Date(props.data.stop_time.replace(/-/g, '/')).getTime()
		if (props.data.num === 0 || time >= end_time) {
			return 'color: #7C7C7C;'
		}
		if ((props.data.num) <= Math.ceil((props.data.num + props.data.signed_num) * 0.2)) {
			return `color: #fff;`;
		} else {
			return `color: #7C7C7C;`;
		}
	})

	const bgColor = computed(() => {
		let time = new Date().getTime()
		let end_time = new Date(props.data.stop_time.replace(/-/g, '/')).getTime()
		// 报名已结束
		if (props.data.num == 0 || time >= end_time) {
			return 'rgba(254, 53, 58, .10)'
		}
		// 剩余20%
		if ((props.data.num) <= Math.ceil((props.data.num + props.data.signed_num) * 0.2)) {
			return `rgba(254, 53, 58, 1)`;
		} else {
		// 大于20%
			return `rgba(254, 53, 58, .10)`;
		}
	})

	onMounted(() => {

	})
</script>

<style lang="scss" scoped>
	.list {
		height: 230rpx;
		margin: 15rpx 0rpx;

		.img {
			width: 220rpx;
			height: 230rpx;

			margin-left: 15rpx;
			border-radius: 15rpx;
			;
		}

		.cont {
			width: 70%;
			height: 230rpx;
			margin-left: 10rpx;


			.title {
				width: 450rpx;
				font-weight: 700;
				font-size: 30rpx;
				line-height: 60rpx;
				letter-spacing: 1rpx;
				color: #333333;
			}

			.hot {
				.hot_img {
					width: 60rpx;
					height: 30rpx;
				}

				.hot_num {
					margin-left: 10rpx;
					color: #FE353A;
					font-weight: 700;
					font-size: 24rpx;
					line-height: 30rpx;
				}
			}

			.labels {
				padding-top: 10rpx;

				.item {
					border-style: solid;
					border-width: 2rpx;
					border-color: #C8C8C8;
					border-radius: 5rpx;
					;
					font-size: 22rpx;
					line-height: 24rpx;
					color: #999999;
					padding: 5rpx;
				}
			}

			.bottoms {
				.postion_time {
					color: #999999;

					.position {
						margin-top: 10rpx;
						font-size: 24rpx;
						line-height: 36rpx;
						letter-spacing: 2rpx;
						width: 300rpx;
					}

					.time {
						margin-top: 10rpx;
						font-size: 22rpx;
						line-height: 40rpx;
						letter-spacing: 2rpx;
					}
				}

				.amount_num {
					margin-right: 10rpx;

					.amount {
						.money {
							font-size: 18rpx;
							line-height: 18rpx;
							color: #FE353A;
						}

						.unit {
							font-size: 20rpx;
							line-height: 20rpx;
							color: #999999;
						}

						.amount_text {
							color: #FE353A;
							font-weight: 700;
							font-size: 32rpx;
							line-height: 50rpx;
							
						}
					}

					.num {
						padding: 5rpx;
						border-radius: 8rpx;

						.num_text {
							font-weight: 400;
							font-size: 22rpx;
							line-height: 22rpx;
						}
					}

					.free {
						background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(255, 209, 209, 0.6) 100%);
						font-weight: 700;
						font-size: 32rpx;
						line-height: 50rpx;
						color: #FE353A;
						margin-bottom: 8rpx;
						width: 100rpx;
						text-align: center;
						letter-spacing: 1rpx;
						border-radius: 5rpx;
					}
				}
			}

			.labels>.item:nth-child(2) {
				margin-left: 6rpx;
			}
		}
	}

	/* 文本超出多行显示省略 如两行 */
	.overflow-ellipsis {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		/* 2指超过两行就显示省略号，以此类推 */
		-webkit-box-orient: vertical;
	}
</style>